*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    width: 100%;
    min-height: 100vh;     /*  允许定义的最小高度 */
    color: #efe;
    background-color: #182848;
    display: flex;
    justify-content: center;
    align-items: center;
}
#box1 > button{
    border: none;
    position: relative;
    border-radius: 10px;
    cursor: crosshair;      /* 光标样式 */
    background-color: #182848;
    padding: 2em 4em;
    font-family: sans-serif;
}
#box1 > button > a{
    text-decoration: none;      /* 文字修饰 */
    font-size: clamp(1.5rem,2.5vw,2.5rem);      
    /* clamp(min,default,max),   min，是最小值，不得低于这个数；
    default用于动态默认值单位，例如rem,vw,vh,100%!
    max，是最大值，不得高于这个数*/
    background:linear-gradient(-45deg,#ff00c1,#00fff9) ;
    -webkit-background-clip: text; 
    /* -webkit-background-clip: text;意思是，以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉 */
    -webkit-text-fill-color: transparent;
    /* 透明 */
}
#box1 > button::after,#box1 > button::before{
    content: "";
    position: absolute;
    background: linear-gradient(
        var(--rotate),
        #ff00c1 0%,
        #9600ff 25%,
        #4900ff 50%,
        #00b8ff 80%,
        #00fff9 100%
    );
    width: 105%;
    height: 110%;
    left: -2.5%;
    top: -5%;
    border-radius: 10px;
    z-index: -1;
    transition: --rotate 9999s linear;
}
#box1 > button:hover::after,#box1 > button:hover::before{
    --rotate:3600deg;
    transition:--rotate 20s linear ;
}
#box1 > button:hover::before{
    animation:fade 1.2s;
}

/* 外边框 */
@property --rotate{
    syntax:"<angle>";
    initial-value:130deg;
    inherits:false;
}

@keyframes fade{
    0%{
        opacity: 1;
        transform: scale(10px);
    }
    100%{
        opacity: 0;
        transform: scale(1.4);
        filter: blur(10px);
    }
}
